<template>
  <div class="collection-visitor-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2 class="page-title">合集展示</h2>
    </div>

    <!-- 合集列表 -->
    <div class="collections-container">
      <!-- 加载状态 -->
      <div v-if="loading" class="loading-container">
        <a-spin size="large" tip="加载中..." />
      </div>

      <!-- 空状态 -->
      <div v-else-if="collections.length === 0" class="empty-container">
        <a-empty description="暂无合集数据" />
      </div>

      <!-- 列表内容 -->
      <div v-else class="collections-grid">
        <div 
          class="collection-card" 
          v-for="(collection, index) in collections" 
          :key="collection.id" 
          @click="handleCollectionClick(collection)"
        >
          <div class="collection-status" :class="getStatusClass(collection.status)">
            {{ getStatusText(collection.status) }}
          </div>

          <img :src="getCoverUrl(collection.coverUrl)" alt="合集封面" class="collection-cover" />

          <div class="collection-info">
            <h3 class="collection-title" :title="collection.name">{{ collection.name }}</h3>
            <p class="collection-desc" :title="collection.description">{{ collection.description }}</p>
            <div class="collection-meta">
              <span>
                <CalendarOutlined /> {{ formatDate(collection.createTime) }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { CalendarOutlined } from '@ant-design/icons-vue'

// 定义合集类型
interface BizCollection {
  id: number
  userId: number
  name: string
  coverUrl: string
  description: string
  status: number
  createTime: string
  updateTime: string
}

// 组件属性
interface Props {
  collections: BizCollection[] // 合集数据
  loading?: boolean // 加载状态
}

const props = withDefaults(defineProps<Props>(), {
  collections: () => [],
  loading: false
})

// 组件事件
const emit = defineEmits<{
  collectionClick: [collection: BizCollection]
}>()

// 读取并标准化 MinIO 基础地址
const minioBaseUrl = ((import.meta as any).env?.VITE_MINIO_URL || '').replace(/\/$/, '')

// 处理合集点击
const handleCollectionClick = (collection: BizCollection) => {
  console.log('访客点击了合集卡片，ID：', collection.id)
  emit('collectionClick', collection)
}

// 获取封面完整URL
const getCoverUrl = (coverUrl?: string) => {
  if (!coverUrl) return ''
  if (/^https?:\/\//i.test(coverUrl)) return coverUrl
  const path = coverUrl.startsWith('/') ? coverUrl : `/${coverUrl}`
  return `${minioBaseUrl}${path}`
}

// 格式化日期
const formatDate = (dateString: string) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  return date.toLocaleDateString()
}

// 状态文本映射
const getStatusText = (status: number) => {
  const statusMap: Record<number, string> = {
    1: '开放',
    2: '隐藏'
  }
  return statusMap[status] || '未知'
}

// 状态样式映射
const getStatusClass = (status: number) => {
  const classMap: Record<number, string> = {
    1: 'status-open',
    2: 'status-hidden'
  }
  return classMap[status] || 'status-unknown'
}
</script>

<style scoped>
.collection-visitor-container {
  width: 100%;
  background: #0b2b5b;
  min-height: 600px;
  padding: 20px;
  color: #fff;
}

/* 页面头部 */
.page-header {
  margin-bottom: 20px;
}

.page-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #fff;
}

/* 合集列表容器 */
.collections-container {
  width: 100%;
}

/* 加载状态 */
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}

/* 空状态 */
.empty-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: #999;
  text-align: center;
}

/* 合集网格 */
.collections-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

/* 合集卡片 */
.collection-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
}

.collection-card:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

/* 状态标签 */
.collection-status {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  z-index: 1;
}

.status-open {
  background: rgba(76, 175, 80, 0.9);
  color: #fff;
}

.status-hidden {
  background: rgba(158, 158, 158, 0.9);
  color: #fff;
}

.status-unknown {
  background: rgba(255, 152, 0, 0.9);
  color: #fff;
}

/* 合集封面 */
.collection-cover {
  width: 100%;
  height: 160px;
  object-fit: cover;
  transition: transform 0.3s;
}

.collection-card:hover .collection-cover {
  transform: scale(1.05);
}

/* 合集信息 */
.collection-info {
  padding: 16px;
}

.collection-title {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.collection-desc {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: #ddd;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 40px;
}

.collection-meta {
  color: #999;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .collections-grid {
    grid-template-columns: 1fr;
  }
  
  .collection-visitor-container {
    padding: 16px;
  }
  
  .page-title {
    font-size: 18px;
  }
}
</style>
